<template>
    <div>
        <slot></slot>
        <div  class="list_wrapper" v-for="item in movies.list" :key="item.id">
            <div class="list_left">
                 <img :src=" item.img | filterImg" alt="">
                 <div class="movies_item">
                     <span>{{item.nm}}</span>
                     <span>{{item.enm}}</span>
                     <span>{{item.cat}}</span>
                     <span>{{item.pubDesc}}</span>
                 </div>
            </div>
            <div class="list_right">
                <div class="movie_score" v-if="item.sc">{{item.sc}}分</div>
                <div class="check_btn" v-else>{{item.wish}}人想看</div>
            </div>
        </div>
        <slot name="movies"></slot>
    </div>
</template>
<script>
export default {
    filters:{
        filterImg(item) {
            return item.replace('w.h','85.120')
        }
    },
    props:['movies'],
}
</script>
<style>
    .list_wrapper{
        padding: 10px 8px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* align-items: center; */
    }
    .list_left{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .movies_item{
        margin-left: 15px;
        display: flex;
        flex-direction:column;
        justify-content: flex-start;
        font-size: 14px;
        color: #666
    }
    .movies_item span{
        padding-bottom: 3px
    }
    .movies_item span:first-child{
        color: #333;
        font-size: 15px;
        font-weight: 600;
    }  
    .list_right{
        flex-shrink: 0;
        font-size: 16px;
        color: #FFB501;
    }
</style>